Coffee School
Code Editor
// Creating environment variables
var playerSize = 10;
var sceneWidth = 300, sceneHeight = 150;
var groundHeight = 10;
var playAreaHeight = (sceneHeight - groundHeight);
// Create the variables to track player movement
var playerVel = 0; // Stores the player's velocity
var g = 0.4; // The constant acceleration cause by "gravity"
// Object width!
var objectWidth = 2 * playerSize;
// Obstacle Counter
var obstacleCounter = 0;
// Sets the background colour
Crafty.background("#ADD8E6");
// Create the ground!
Crafty.e("Solid, 2D, DOM, Color")
.attr({x: 0,
y: playAreaHeight,
w: sceneWidth,
h: groundHeight})
.color("#00ff00");
// Create our player's base entity
Crafty.e("2D, DOM, Color") // Specifying the components to add
.attr({x: 30, y: 30, w: playerSize, h: playerSize}) // Specifying the dimensions and the point to draw from
.color("#ff0000") // Specifying the colour of the rectangle
.bind("EnterFrame", function() { // Binds the "EnterFrame" event to the entity
if(this.y < 0) {
playerVel = g; // Prevent the player from going above the game screen
}
else {
playerVel += g; // Adds the "gravitational acceleration" to the player's velocity
}
this.y += playerVel; // Change the player entities y position based on the player velocity
})
.bind("KeyDown", function(event) { // Binds the "KeyDown" event to our player entity
if(event.key == Crafty.keys.SPACE){ // If the key is the spacebar then "flap"
playerVel = -5; // Sets the player's speed and direction to go upwards
}
})
.bind("EnterFrame", function() {
Crafty("Obstacle").each(function() {
if(this.x < -objectWidth) {
this.destroy();
}
else {
this.x -= 3;
}
});
if(obstacleCounter > 100){
obstacleCounter = 0;
newObstacle();
}
obstacleCounter++;
});
function newObstacle()
{
var randomHeight = Math.floor((Math.random() * (sceneHeight/2)) + (sceneHeight/3));
var bottomOfTopHalf = playAreaHeight - randomHeight;
var topOfBottomHalf = bottomOfTopHalf + (4 * playerSize);
// Create the top half of the pipe
Crafty.e("Obstacle, 2D, DOM, Color, Solid")
.attr({x: sceneWidth,
y: 0,
w: objectWidth,
h: bottomOfTopHalf})
.color("#003319");
// Create the bottom half of the pipe
Crafty.e("Obstacle, 2D, DOM, Color, Solid")
.attr({x: sceneWidth,
y: topOfBottomHalf,
w: objectWidth,
h: playAreaHeight - topOfBottomHalf})
.color("#003319");
}
Preview
Console Log:
Part 3: Detecting Collisions With the Player
Time estimate for Part 3: 10 minutes
We have our ground and our moving obstacles, but our player just passes right through them at the minute. That’s no fun :(.
To detect the player’s collisions with other things we’re going to make use of the Solid component we gave our ground and obstacles earlier. To use this component with our player we’re going to make use of Crafty’s Collision component, which provides a way of checking for collisions with other entities.
In a game like this usually if the player collides with an object the game is stopped and the player loses, so that’s what we’re going to do!